<!DOCTYPE html>
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="renderer" content="webkit">
    <title>流程图DEMO 导航图</title>
    <!--[if lt IE 9]>
    <?import namespace="v" implementation="#default#VML" ?>
    <script type="text/javascript" src="https://cdn.bootcss.com/json2/20160511/json2.min.js"></script>
    <![endif]-->
    <link rel="shortcut icon" href="../assets/img/favicon.png" type="image/x-icon"/>
    <link rel="stylesheet" type="text/css" href="../dist/GooFlow.min.css"/>
<style>
.myForm{display:block;margin:0px;padding:0px;line-height:1.5;border:#ccc 1px solid;font: 12px Arial, Helvetica, sans-serif;margin:5px 5px 0px 0px;border-radius:4px;}
.myForm .form_title{background:#428bca;padding:4px;color:#fff;border-radius:3px 3px 0px 0px;}
.myForm .form_content{background:#fff;}
.myForm .form_btn_div{text-align:center;border-top:#ccc 1px solid;background:#f5f5f5;padding:4px;border-radius:0px 0px 3px 3px;} 
#propertyForm{float:right;width:300px}
.class2{position: absolute;width:170px;height:190px;top: 260px;left: 208px;box-shadow: rgba(0,0,0,.6) 0 0 0 1366px;}
</style>
</head>
<body style="background:#EEEEEE">
<div id="demo" style="margin:5px;float:left"></div>
<form class="myForm" id="propertyForm">
<div class="form_title">导航图</div>
<div class="form_content">
    <div id="navmapDemo"></div>
</div>
    <div class="form_title">结果数据</div>
    <div class="form_content">
        <table>
            <tr><td><input id="submit" type="button" value='导出结果' onclick="Export()"/></td></tr>
            <tr><td class="td"><textarea style="width:288px" id="result" rows="14"></textarea></td></tr>
        </table>
    </div>
</form>
<!-- build:js ../assets/js/demo_navmap.js -->
<script type="text/javascript" src="../assets/js/jquery.min.js"></script>
<script type="text/javascript" src="../dist/GooFlow.min.js"></script>
<script type="text/javascript" src="../dist/GooFlow.group.min.js"></script>
<script type="text/javascript" src="../dist/GooFlow.memo.min.js"></script>
<script type="text/javascript" src="../dist/GooFlow.navmap.min.js"></script>
<script type="text/javascript" src="../assets/js/config.js"></script>
<script type="text/javascript" src="../assets/js/auth.js"></script>
<script type="text/javascript" src="demo/child.js"></script>
<!-- endbuild -->
<script type="text/javascript">
    var property={
        auth:auth,
        width:800,
        height:500,
        toolBtns:["start round","end round","task round","node","chat","state","complex mix"],
        haveHead:true,
        headBtns:["new","open","save","undo","redo","reload"],//如果haveHead=true，则定义HEAD区的按钮
        haveTool:true,
        haveGroup:true,
		haveMemo:true,
        haveDirDashed:true,
        haveSegment:true,
        haveSegDashed:true,
        useOperStack:true
    };
    var remark={
        cursor:"选择指针",
        direct:"结点连线",
        start:"入口结点",
        "end":"结束结点",
        "task":"任务结点",
        node:"自动结点",
        chat:"决策结点",
        state:"状态结点",
        plug:"附加插件",
        fork:"分支结点",
        "join":"联合结点",
        "complex mix":"复合结点",
        group:"组织划分框编辑开关",
		memo:"便笺编辑开关"
    };
    var demo;
    $(document).ready(function(){
        demo=GooFlow.init("#demo",property);
        demo.setNodeRemarks(remark);
        demo.initNavMap("#navmapDemo",300,200);
        demo.loadData(jsondata);
        demo.onItemBlur=function(id,model){
            document.getElementById("propertyForm").reset();
            return true;
        };
    });
    function Export(){
        document.getElementById("result").value=JSON.stringify(demo.exportData());
    }
</script>

</body>
</html>
